import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:enterprise_v8/app/components/custom_app_bar.dart';
import 'package:enterprise_v8/app/components/custom_modele/custom_field.dart';
import 'package:enterprise_v8/app/components/custom_modele/custom_picker_photo.dart';
import 'package:enterprise_v8/app/components/signature/signature_view.dart';
import 'package:enterprise_v8/app/components/toast_widget.dart';
import 'package:enterprise_v8/app/core/ext/ext.dart';
import 'package:enterprise_v8/app/core/ext/list.dart';
import 'package:enterprise_v8/app/core/utils/interface.dart';
import 'package:enterprise_v8/app/core/values/colors.dart';
import 'package:enterprise_v8/app/core/values/gaps.dart';
import 'package:enterprise_v8/modules/home/user/user_info/user_info_controller.dart';
import 'package:enterprise_v8/router/app_pages.dart';

///个人信息
class UserInfoPage extends StatelessWidget {
  UserInfoPage({super.key});

  final controller = Get.put(UserInfoController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.Pure_gray_bg,
      appBar: CustomAppBar(
        titleText: '个人信息',
      ),
      body: GetBuilder(
        init: controller,
        builder: (_) {
          return PopScope(
            canPop: controller.canPop,
            onPopInvoked: (didPop) {
              if (!didPop && controller.signatureUrl.value.isNotEmpty && controller.faceUrl.isNotEmpty) {
                AppToast.showWarning('请点击更新基本信息!');
              } else if (!didPop) {
                AppToast.showWarning('请完善用户信息!');
              }
            },
            child: _buildEditing(),
          );
        },
      ),
      // bottomSheet: SafeArea(child: _buildBottom()),
    );
  }

  Widget _buildEditing() {
    final children = <Widget>[
      CustomField(
        title: '工号',
        right: Text(
          '0001',
          style: TextStyle(
            color: const Color(0xFF495061),
            fontSize: 14.w,
          ),
        ),
      ).clickOnce(() {
        Get.toNamed(Routes.myInfoCommon, arguments: {'key': '工号', 'value': '0001'});
      }),
      CustomField(
        title: '人员姓名',
        right: Text(
          '阿星',
          style: TextStyle(
            color: const Color(0xFF495061),
            fontSize: 14.w,
          ),
        ),
      ).clickOnce(() {
        Get.toNamed(Routes.myInfoCommon, arguments: {'key': '人员姓名', 'value': '阿星'});
      }),
      CustomField(
        title: '性别',
        right: Text(
          '男',
          style: TextStyle(
            color: const Color(0xFF495061),
            fontSize: 14.w,
          ),
        ),
      ).clickOnce(() {
        Get.toNamed(Routes.myInfoCommon, arguments: {'key': '性别', 'value': '男'});
      }),
      CustomField(
        title: '手机号',
        right: Text(
          '12233334444',
          style: TextStyle(
            color: const Color(0xFF495061),
            fontSize: 14.w,
          ),
        ),
      ).clickOnce(() {
        Get.toNamed(Routes.myInfoCommon, arguments: {'key': '手机号', 'value': '12233334444'});
      }),
      CustomField(
        title: '所属机构',
        right: Text(
          '化工企业机构1',
          style: TextStyle(
            color: const Color(0xFF495061),
            fontSize: 14.w,
          ),
        ),
      ).clickOnce(() {
        Get.toNamed(Routes.myInfoCommon, arguments: {'key': '所属机构', 'value': '化工企业机构1'});
      }),
      CustomField(
        title: '岗位',
        right: Text(
          '安全员',
          style: TextStyle(
            color: const Color(0xFF495061),
            fontSize: 14.w,
          ),
        ),
      ).clickOnce(() {
        Get.toNamed(Routes.myInfoCommon, arguments: {'key': '岗位', 'value': '安全员'});
      }),
      CustomField(
        title: '邮箱',
        right: Text(
          'xxxxxxx@qq.com',
          style: TextStyle(
            color: const Color(0xFF495061),
            fontSize: 14.w,
          ),
        ),
      ).clickOnce(() {
        Get.toNamed(Routes.myInfoCommon, arguments: {'key': '邮箱', 'value': 'xxxxxxx@qq.com'});
      }),
      CustomField(
        title: '身份证号',
        right: Text(
          '322332211321113321',
          style: TextStyle(
            color: const Color(0xFF495061),
            fontSize: 14.w,
          ),
        ),
      ).clickOnce(() {
        Get.toNamed(Routes.myInfoCommon, arguments: {'key': '身份证号', 'value': '322332211321113321'});
      }),
      CustomField(
        title: '签字笔迹',
        isRequired: true,
        right: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Text(
              '去签字',
              style: TextStyle(fontSize: 14.w, color: Colors.grey),
            ),
            AppGaps.hGap6,
            Icon(
              Icons.arrow_forward_ios,
              size: 13.w,
              color: Colors.grey,
            ),
          ],
        ),
        bottom: Obx(
          () => controller.signatureUrl.value.isEmpty
              ? const SizedBox()
              : Row(
                  children: [
                    Text(
                      '签字后笔迹:',
                      style: TextStyle(fontSize: 12.sp, color: Colors.grey),
                    ),
                    AppGaps.hGap14,
                    _buildPic(controller.signatureUrl.value),
                  ],
                ),
        ),
      ).clickOnce(() async {
        final url = await Get.to<String>(SignatureWidget.new);
        if (url != null) {
          controller.signatureUrl.value = url;
        }
      }),
    ].joinWith(Divider(
      height: 1.w,
      color: const Color(0xffECEEF3),
    ));
    children.add(AppGaps.vGap6);
    return SingleChildScrollView(
      child: Column(
        children: [
          AppGaps.vGap10,
          Container(
            decoration: const BoxDecoration(
              color: Colors.white,
            ),
            child: Column(
              children: children,
            ),
          ),
          AppGaps.vGap10,
          Container(
            decoration: const BoxDecoration(
              color: Colors.white,
            ),
            child: _buildCollect(),
          ),
          AppGaps.vGap50
        ],
      ),
    );
  }

  Widget _buildPic(String url) {
    return Container(
      height: 37.w,
      width: 77.w,
      decoration: BoxDecoration(
        color: const Color(0xffF7F7FB),
        border: Border.all(
          color: const Color(0xffEBEDF0),
        ),
        borderRadius: BorderRadius.circular(6.r),
        image: DecorationImage(
          image: NetworkImage(Interface.fileUrl + url),
          fit: BoxFit.cover,
        ),
      ),
      // child: Image.network(Interface.fileUrl + url),
    ).clickShowLarge(url: Interface.fileUrl + url);
  }

  /// 采集
  Widget _buildCollect() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10.w),
          ),
          child: Column(
            children: [
              _buildCollectPhotoUpload(),
              AppGaps.vGap16,
              _buildCollectTip(),
              AppGaps.vGap16,
              _buildCollectAcknowledge(),
            ],
          ),
        ),
        AppGaps.vGap16,
      ],
    );
  }

  Widget _buildCollectPhotoUpload() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 13.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          CustomPickerPhoto(
            title: '人脸照片',
            imagesList: controller.faceUrl.isNotEmpty ? [controller.faceUrl] : [],
            maxCount: 1,
            isRequired: true,
            callback: (path) {
              if (path.isNotEmpty) {
                controller.faceUrl = path.first;
              } else {
                controller.faceUrl = '';
              }
            },
            onImage: (data) => controller.faceData = data,
          ),
          Text(
            '支持JPG、PNG最大上传5M',
            style: TextStyle(fontSize: 10.w, color: const Color(0xFFA0A7B5)),
          ),
        ],
      ),
    );
  }

  Widget _buildCollectTip() {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFF5F5F5),
        borderRadius: BorderRadius.circular(10.w),
      ),
      margin: EdgeInsets.symmetric(horizontal: 17.w),
      padding: EdgeInsets.all(13.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '人脸采集 (请允许摄像头权限，保持良好光线，对准人脸进行拍照) ，否则将会影响账号使用',
            style: TextStyle(fontSize: 12.w),
          ),
        ],
      ),
    );
  }

  Widget _buildCollectAcknowledge() {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFF5F5F5),
        borderRadius: BorderRadius.circular(10.w),
      ),
      margin: EdgeInsets.symmetric(horizontal: 17.w),
      padding: EdgeInsets.all(13.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Center(
            child: Text(
              '人脸认证须知',
              style: TextStyle(fontSize: 14.w),
              textAlign: TextAlign.center,
            ),
          ),
          Text(
            '1、请确保拍照环境光线良好，镜头清晰。',
            style: TextStyle(fontSize: 12.w),
          ),
          Text(
            '2、不要在照片内出现多人或遮挡脸部等影响识别结果。',
            style: TextStyle(fontSize: 12.w),
          ),
          Text(
            '3、请确保照片是本人，否则将影响学员的档案记录和职业考核。',
            style: TextStyle(fontSize: 12.w),
          ),
        ].joinWith(AppGaps.vGap6),
      ),
    );
  }
}
